<template>
  <el-main>
    <!--      面包屑        -->
    <!-- <el-card class="box-card">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item>
        <el-breadcrumb-item
          ><a href="/">promotion management</a></el-breadcrumb-item
        >
        <el-breadcrumb-item>promotion list</el-breadcrumb-item>
        <el-breadcrumb-item>promotion detail</el-breadcrumb-item>
      </el-breadcrumb>
    </el-card> -->
    <!--        列表功能      -->
    <el-card class="box-card">
      <el-row class="mb-4">
        <el-button>全选</el-button>
        <el-button type="primary" @click="addNew"
          ><el-icon><CirclePlus /></el-icon>新增</el-button
        >
        <!--        <el-button type="success"><el-icon><Document /></el-icon>导出</el-button>-->
        <!--        <el-button type="warning"><el-icon><Switch /></el-icon>转交</el-button>-->
        <!--        <el-button type="info"><el-icon><Printer /></el-icon>打印</el-button>-->
        <el-button type="danger"
          ><el-icon><Delete /></el-icon>删除</el-button
        >
      </el-row>
    </el-card>
    <!--       搜索       -->
    <tableSearch :filedTypeList="filedTypeList"></tableSearch>
    <!--      列表        -->
    <tableList
      :total="total"
      :pagesize="pagesize"
      :tableData="tableListData"
      :tableField="tableField"
      :isSelectMult="true"
    ></tableList>
    <!--              //分页-->

    <!-- 更改弹窗状态 start -->
    <el-dialog v-model="dialogVisible" title="修改状态" width="30%">
      <span>是否修改客户到院状态？</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="dialogVisible = false">
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 更改状态弹窗 end -->
  </el-main>
</template>

<script lang="ts" setup>
import { reactive, ref,onBeforeMount } from "vue";
import { Document } from "@element-plus/icons-vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import tableList from "../../../common/pages/table.vue";
import tableSearch from "../../../common/pages/tableSearch.vue";
import { getUsersInfoList } from "../../../request/api";
//-------预约页面独立部分js   start -----//
//更改状态
const dialogVisible = ref(false);
const router = useRouter();
//-------预约页面独立部分js   end -----//

//预约搜索字段
const filedTypeList = ref([
  {
    field: "username",
    label: "用户名",
    type: "text",
    placeholder: "请输入用户名",
  },
  {
    field: "nickname",
    label: "昵称",
    type: "text",
    placeholder: "请输入昵称",
  },
  {
    field: "email",
    label: "邮箱",
    type: "text",
    placeholder: "请输入邮箱",
  },
  {
    field: "phone",
    label: "手机号",
    type: "text",
    placeholder: "请输入手机号码",
  },
  {
    field: "select",
    label: "医院",
    type: "select",
    placeholder: "请选择客户状态",
    option: [
      {
        label: "西安医院",
        value: "shanghai", //选择的真正值
      },
      {
        label: "上海医院",
        value: "beijing",
      },
    ],
  },
  {
    field: "select",
    label: "职位",
    type: "select",
    placeholder: "请选择来源渠道",
    option: [
      {
        label: "管理",
        value: "shanghai", //选择的真正值
      },
      {
        label: "员工",
        value: "beijing",
      },
    ],
  },
  {
    field: "select",
    label: "部门",
    type: "select",
    placeholder: "请选择来源渠道",
    option: [
      {
        label: "管理",
        value: "shanghai", //选择的真正值
      },
      {
        label: "员工",
        value: "beijing",
      },
    ],
  },
  {
    field: "select",
    label: "角色",
    type: "select",
    placeholder: "请选择来源渠道",
    option: [
      {
        label: "管理",
        value: "shanghai", //选择的真正值
      },
      {
        label: "员工",
        value: "beijing",
      },
    ],
  },
  {
    field: "is_deal",
    label: "状态",
    type: "select",
    placeholder: "请选择成交状态",
    option: [
      {
        label: "启用",
        value: "shanghai", //选择的真正值
      },
      {
        label: "禁用",
        value: "beijing",
      },
    ],
  },
]);

// const total = 100; 
// const pagesize = 20; 
const total = ref(0);//数据总数
const pagesize = ref(0);//单页数据数量
//列表字段
// const tableField = [
//   {
//     field: "username",
//     label: "用户名",
//     fixed: "",
//     width: "120",
//   },
//   {
//     field: "nickname",
//     label: "用户昵称",
//     width: "120",
//   },
//   {
//     field: "email",
//     label: "邮箱",
//     width: "180",
//   },
//   {
//     field: "phone",
//     label: "手机号",
//     width: "150",
//   },
//   {
//     field: "department",
//     label: "部门",
//     width: "150",
//   },
//   {
//     field: "role",
//     label: "角色",
//     width: "150",
//   },
//   {
//     field: "position",
//     label: "职位",
//     width: "150",
//   },
//   {
//     field: "hospital",
//     label: "医院",
//     width: "220",
//   },
//   {
//     field: "status",
//     label: "状态",
//     width: "90",
//     type: "tag",
//     options: ["启用", "禁用"],
//   },
//   {
//     field: "last_login_time",
//     label: "最后一次登录时间",
//     width: "150",
//   },
//   {
//     field: "opera",
//     label: "操作",
//     fixed: "right",
//     width: "280",
//     type: "opera",
//     opera: [
//       {
//         type: "edit",
//         text: "编辑",
//       },
//       {
//         type: "status",
//         text: "处理",
//       },
//       {
//         type: "delete",
//         text: "删除",
//       },
//     ],
//   },
// ];
// //列表数据
// const tableListData = [
//   {
//     username: "yanyinzheng", //用户名
//     nickname: "opt", //昵称
//     email: "1045434361@qq.com", //邮箱
//     phone: "185****1491", //手机号
//     department: "市场部", //客户来源
//     role: "专员", //跟进人
//     position: "员工", //状态
//     status: 1, //账号状态
//     hospital: "西安医院", //医院
//     last_login_time: "2016-05-03 16:16", //最后一次登录时间
//   },
// ];
const tableField = ref([]);
const tableListData = ref([]);
const addNew = () => {
  console.log("新增客户");
  router.push("/users_edit");
};
onBeforeMount(() => {
  getUsersInfoList().then((res) => {
    console.log(res);
    if (res.code == 200) {
      total.value = res.data.total||res.data.list.length;
      pagesize.value = res.data.total_page||1;
      tableListData.value = res.data.list;
      for (let key in res.data.column_name) {
        let obj = { label: "", field: "" };
        console.log(key);
        obj.field = key;
        obj.label = res.data.column_name[key];
        tableField.value.push(obj);
      }
    }
  });
});
</script>

<style scoped></style>
